<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<?php
     $idPro = $_GET['pro_id'];
?>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="view/jquery/jquery.ad-gallery.css">
  <link rel="stylesheet" type="text/css" href="../css/style.css">
  <link rel="stylesheet" type="text/css" href="../css/styles.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <script type="text/javascript" src="view/jquery/jquery.ad-gallery.js"></script>
  <script type="text/javascript" src="view/js/js.js"></script>
  <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
  <script type="text/javascript">
  $(function() {
    /*$('img.image1').data('ad-desc', 'Whoa! This description is set through elm.data("ad-desc") instead of using the longdesc attribute.<br>And it contains <strong>H</strong>ow <strong>T</strong>o <strong>M</strong>eet <strong>L</strong>adies... <em>What?</em> That aint what HTML stands for? Man...');
    $('img.image1').data('ad-title', 'Title through $.data');
    $('img.image4').data('ad-desc', 'This image is wider than the wrapper, so it has been scaled down');
    $('img.image5').data('ad-desc', 'This image is higher than the wrapper, so it has been scaled down');*/
    var galleries = $('.ad-gallery').adGallery();
    $('#switch-effect').change(
      function() {
        galleries[0].settings.effect = $(this).val();
        return false;
      }
    );
    $('#toggle-slideshow').click(
      function() {
        galleries[0].slideshow.toggle();
        return false;
      }
    );
    $('#toggle-description').click(
      function() {
        if(!galleries[0].settings.description_wrapper) {
          galleries[0].settings.description_wrapper = $('#descriptions');
        } else {
          galleries[0].settings.description_wrapper = false;
        }
        return false;
      }
    );
    var firt_select = $('ul.ad-thumb-list li');
      a(firt_select);
      b(firt_select);
  });

	function a(obj) {
		 //var id = $(obj).parent().find('input').val();
                 var id = <?php  echo $_GET['pro_id'];?>;
         $.getJSON("controller/product/ajax_request.php?idProduct="+id,function(data){
                                        
        var avarta = '';

        avarta += '<img src="images-products/thumbnail/1.jpg">' ;
        $("#avarta").html('');
        $(avarta).appendTo("#avarta");
        $("#product_detail").html('$' + data.price_bid );
        $('#pro_id').val(id);
        $('#price_bid').val(data.price_bid);
        $("#pro_name").html(data.pro_name);
        $("#pro_desc").html(data.pro_desc);
        $("#pro_price_original").html(data.pro_prince);
        $("#bid_price").html(data.price_bid);                                       

        var a =  data.price_bid;
        var b = data.pro_prince;
        var c = b - a;
        $("#saving").html(c);
			
		});   
       	return false;
      }
	  
        function b(obj) {
            var id=<?php  echo $_GET['pro_id'];?>;
            $.getJSON("controller/product/ajax_bid.php?idProduct="+id,function(data){
                var respondHtml = "";
                for (var i = 0; i < data.length; i++) { 
                    var item = data[i];
                    respondHtml += "<tr><td>" + item['bid_price'] + "</td>" + "<td>" +  item['email'] + "</td></tr>";
                } 
                $('#bidhistory').html("<table cellspacing='0' class='broom_table' border='1'><tr><td><font style='2' color='blue' size='3'>Bid</font></td><td><font style='2' color='blue' size='3'>Bidder</font></td></tr>" + respondHtml + "</table>" );
                $('#total_bid').html('<br/>Total: ' + data.length);
                $('#totalbid').val(data.length);
            });   
                return false;
        }

  </script>
<style type="text/css">
	
</style>
</head>
<?php
	require_once 'model/global.inc.php';  
?>
<body>
<div class="main">
  <div id="container">
      <div id="pro_name" class="pro_name"></div>

    <div id="gallery" class="ad-gallery">
        
      <div class="ad-image-wrapper">
      </div>
      <div class="ad-controls"><font style="2"></font>
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
			<?php
				$tv="select * from tblproduct where pro_id = '$idPro'";
				$tv_1=mysql_query($tv);
				$a_tv_1=mysql_query($tv);
				$tv_2=mysql_fetch_array($tv_1);
				$images1 = $tv_2["pro_image1"];
				$images2 = $tv_2["pro_image2"];
				$images3 = $tv_2["pro_image3"];
				$images4 = $tv_2["pro_image4"];
				$images5 = $tv_2["pro_image5"];
			?>
                
				<li>
					<?php
						if($images1 != ''){
					?>
					  <a href="<?php echo "images-products/$tv_2[pro_image1]" ?>">
						<img src="<?php echo "images-products/thumbnail/$tv_2[pro_image1]" ?>" >
					  </a> 
					<?php } ?>
				</li>  
                                <li>
                                    <?php
                                        if($images2 != ''){
                                    ?>
					  <a href="<?php echo "images-products/$tv_2[pro_image2]" ?>">
						<img src="<?php echo "images-products/thumbnail/$tv_2[pro_image2]" ?>" >
					  </a>  
                                    <?php } ?>
				</li>  
                                <li>
                                    <?php
                                        if($images3 != ''){
                                    ?>
					  <a href="<?php echo "images-products/$tv_2[pro_image3]" ?>">
						<img src="<?php echo "images-products/thumbnail/$tv_2[pro_image3]" ?>" >
					  </a>  
                                    <?php } ?>
				</li>  
                                <li>
                                    <?php
                                        if($images4 != ''){
                                    ?>
					  <a href="<?php echo "images-products/$tv_2[pro_image4]" ?>">
						<img src="<?php echo "images-products/thumbnail/$tv_2[pro_image4]" ?>" >
					  </a>  
                                    <?php } ?>
				</li>  
                                <li>
                                    <?php
                                        if($images5 != ''){
                                    ?>
					  <a href="<?php echo "images-products/$tv_2[pro_image5]" ?>">
						<img src="<?php echo "images-products/thumbnail/$tv_2[pro_image5]" ?>" >
					  </a>   
                                    <?php } ?>
				</li> 
         
            
          </ul>
        </div>
      </div>       
    </div>
      <?php
      if(isset($_SESSION['logged_in'])){
         $user = unserialize($_SESSION['user']);
         $memid = $user->memid;
      	 }
					else
					$memid = null;
      ?>
      <div class="product" style="float: left; width: 200px; padding-left: 10px; text-align: center;">
            <div id="product_detail">$0</div>

	<div id="countdown"></div>
	<div>
		<img src ="images-products/thumbnail/avatar.jpg" width="150" height="150"/>
	</div>
		<form id="frm1" name="frm1" method="post" action="" ";>
        	<input type="hidden" value="" name="pro_id" id="pro_id" />
            <input type="hidden" value="" name="price_bid" id="price_bid" />
            <input type="hidden" value="<?php echo $memid ?>" name="memid" id="memid" />
            <input type="hidden" value="" id="totalbid"/>
            <input type="submit" value="   Bid   " name="B1" id="submit" />
        </form>
        <table width="200px" class="form">
            <tr>
                <td colspan="2" class="txt-bid-1">
                    Your saving
                </td>
            </tr>
            <tr>
                <td height="35px">
                    Value price:
                </td>
                <td>
                     <span id="pro_price_original"></span>
                </td>
            </tr>
            <tr>
                <td height="35px">
                    Bid price: 
                </td>
                <td>
                      <span id="bid_price"></span>
                </td>
            </tr>
            <tr>
                <td colspan="2" class="txt-bid-2">
                   Your saving: <span id="saving"></span>
                </td>
            </tr>
            
        </table>
   	  
    </div>
        <!--Hien thi bid history -->
        <div class="bid" style="float: left; width: 300px; padding-left: 10px; text-align: center;">
            <div id="bidhistory"></div>
            <div id="total_bid"></div>
        </div>
        <!--End hien thi bid history -->
      <div id="lblMessage"></div>
  
  </div>
  <div style="clear: both;"></div>
  
  <div id="pro_desc"></div>
</div>

<script type="text/javascript">
    var interval;
    var minutes = 0;
    var seconds = 20;
    window.onload = function() {
        countdown('countdown');
    }
    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    //el.innerHTML = "countdown's over!";  
                    if(document.getElementById('totalbid').value !=null){
                        var total = document.getElementById('totalbid').value*1;
                        if(total == 0){
                            clearInterval(interval);
                            seconds = seconds + 20;
                            countdown('countdown');
                        }
                        else
                        {
                            clearInterval(interval);

                            document.getElementById('submit').disabled = true; 
                            var idPro = <?php  echo $_GET['pro_id'];?>;
                                $.ajax({
                                        type: "POST",
                                        url: "controller/product/completeBid.php",
                                        data: {file : idPro,total : total},
                                        success: function(){

                                        }
                                });
                        }
                    }

                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ':' : ':');
            } else {
                var minute_text = '00:';
            }

            el.innerHTML ='00:' + minute_text + seconds;
            seconds--;

        }, 1000);
    }
</script> 

<script type="text/javascript">
    $(document).ready(function(){
		$("#frm1").validate({			
			submitHandler: function(form) {
				// do other stuff for a valid form
				$.post('controller/product/submit.php', $("#frm1").serialize(), function(data) {
                                    $('#lblMessage').html(data);
                                    
				});
                                a('');
                                b('');       
                               
			}
                        
		});

	});
</script>    
</body>
</html>